آزر · 05 · نظام B — التدوين الهندسي

THE COMPLETE SYSTEM · النظام كاملاً

خمسة مكونات — كل شريحة

الخريطة الكاملة لنظام B في شريحة واحدة. لاحظ أين يقع كل مكون، وكيف يعمل الجميع معاً دون أن ينافس أحدهم الآخر.

SYSTEM B · LIVE DEMO · الشريحة كاملة بمكوناتها

① B-LINE

الحد

footer top · 1px

يفصل الـchrome عن المحتوى. دائم. لا يغيب.

② B-SEAL

الختم

footer right · AZR ◆

هوية آزر الثابتة. الأول يُكتب والأخير يُقرأ.

③ B-NUM

الرقم

footer left · opacity 0.22

ناعم. لا يجذب الانتباه — هناك فقط.

④ B-CENTER

اسم المشروع

footer center · optional

للمخرجات التي تحتاج سياق: آزر لـ[الجهة].

⑤ B-EYE

العين

قبل عنوان القسم

نقطة + نص mono. يُصنّف القسم ويبدأ التسلسل.

COMPONENTS · المكونات بالتفصيل

كل مكون — وحيداً

كل مكون من الخمسة له منطق مستقل. افهم كل واحد قبل فهم كيف يجتمعون.

◆

FOOTER RIGHT · FIXED

①

B-SEAL · الختم

AZR ◆

هوية آزر الكاملة في رمزين. "AZR" = الاسم المختصر. "◆" = ختم الاكتمال — يعني "هذا المخرج مكتمل بهوية آزر".

الخط

JetBrains Mono 500

الحجم

slides: 18–22px · docs: 11–12pt

اللون

p-500 · على داكن: p-400

الموضع

footer · يمين دائماً

المسافة

حد 48–60px من الحافة

INSIGHT · النتائج

METHOD · المنهجية

DATA · الأرقام

⑤

B-EYE · العين

● + LABEL

نقطة مملوءة بـp-500 + نص mono. تُصنّف القسم وتُعلن "نوع" المحتوى القادم. القارئ يقرؤها قبل العنوان ويعرف ماذا يتوقع.

النقطة

8–10px · circle · p-500

الخط

JetBrains Mono 500

الحجم

14–20px · slides أكبر

letter-spacing

.18em–.24em (مقصود)

الموضع

قبل عنوان القسم بـ12–16px

03 اسم المشروع azr

← الحد 1px p-500 →

10

← الحد السفلي للـheader →

①

B-LINE · الحد

شريط الفصل

خط أفقي بسيط يفصل الـchrome (footer/header) عن المحتوى. يُعلن: "هذا الجزء يخص آزر، وذاك يخص المحتوى."

السماكة

1px دائماً

اللون

p-500 · opacity: .12–.20

الطول

100% من عرض الشريحة

الموضع

أعلى الـfooter · أسفل الـheader

07

PAGE NUMBER

آزر لـ [الجهة]

PROJECT CONTEXT

③ ④

B-NUM + B-CENTER

الرقم + السياق

الرقم: يُعلم لا يُزعج — opacity 0.20–0.25. السياق: اختياري، للمخرجات التي تُرسَل للعملاء. كلاهما في الـfooter على جانبي الختم.

الرقم

Mono 300 · opacity .22

الحجم

slides: 14–18px

السياق

Mono 400 · opacity .18

السياق

اختياري — للمخرجات الخارجية

POSITION MAP · خريطة التوضع

كل مكون — مكانه الثابت

الثبات هو قيمة نظام B. القارئ يعرف أين يجد الرقم، أين الختم، أين العين — دون تفكير. هذا يُخفف المعرفية ويتيح له التركيز على المحتوى.

POSITION MAP · شريحة 1920×1080

LEGEND · دليل الموضع

① B-LINE

أعلى منطقة الـfooter — يفصل الـchrome

② B-SEAL

يمين الـfooter — ثابت في كل شريحة

③ B-NUM

يسار الـfooter — منخفض الشفافية

④ B-CENTER

منتصف الـfooter — اختياري

⑤ B-EYE

قبل عنوان القسم — في منطقة المحتوى

LIGHT · DARK · الفاتح والداكن

نفس المكونات — تكيّف لوني واحد

نظام B يتكيف مع الخلفية بقاعدة واحدة بسيطة: p-500 على الفاتح، p-400 على الداكن. لا تغيير في الموضع أو الحجم أو الوظيفة.

DARK BACKGROUND · خلفية داكنة

04 آزر لـ [الجهة] azr

ختم: p-400 (#7D5CD0) · رقم: white 20% · سياق: white 15%

SECTION LABEL

عين: p-400 · نص العين: p-400

LIGHT BACKGROUND · خلفية فاتحة

04 آزر لـ [الجهة] azr

ختم: p-500 (#5B3CC4) · رقم: ink 20% · سياق: ink 15%

SECTION LABEL

عين: p-500 · نص العين: p-500

الفرق الوحيد بين الفاتح والداكن: p-500 → p-400 للختم والعين. كل شيء آخر يبقى. الموضع لا يتغير. الحجم لا يتغير. الوظيفة لا تتغير.

SPECIFICATIONS · المقاسات

الأرقام الدقيقة — للتطبيق المباشر

المكون

شريحة 1920×1080 — البعد الموحَّد (M-05)

ملاحظة

الختم AZR ◆

صورة · ارتفاع 26px

يمين الـfooter · 64px من الحافة · azr-wordmark-cream.png على الداكنة، -ink.png على الفاتحة

العين — النقطة

10px radius

دائرة مملوءة p-500 · inline قبل النص

العين — النص

20px · Mono 500

letter-spacing: .18–.22em · UPPERCASE

الرقم

18px · Mono 300

opacity: .22 · يسار الـfooter

الحد

1px · opacity .18 (فاتحة) / .22 (داكنة)

p-500 على الفاتحة · p-300 على الداكنة (M-01) · 100% عرض · أعلى الـfooter zone

الـfooter zone

48px

يمكن تقليصها لـ40px للـvery dense slides

IN CONTEXT · في الشرائح

نظام B على ثلاثة خلفيات

03

FINDING · النتيجة

الهوية
تسبق المنتج

03 آزر · النظام البصري azr

خلفية داكنة · B-system p-400

07

DATA · الأرقام

٦٨٪

يبحثون رقمياً قبل الزيارة

07 آزر · النظام البصري azr

خلفية فاتحة · B-system p-500

01

المفهوم

مسار

منصة الرعاية الصحية

01 آزر لـ [الجهة الصحية] azr

خلفية لون المفهوم · B-system يبقى بنفسجياً

ملاحظ في المثال الثالث: حتى حين تكون خلفية الشريحة بلون المفهوم (teal)، الـB-system (الختم، الرقم، العين) يبقى p-500 البنفسجي. هذا هو الفاصل الهرمي المرئي: آزر = بنفسجي، المفهوم = أي لون آخر.

DON'TS · المحظورات

حين يُكسر نظام B

✕ محظور 01

لا تُلوّن الختم بغير البنفسجي

AZR ◆ بلون المفهوم يُسقط الهرمية — يُوحي بأن آزر "تبنّى" هوية العميل. الختم يبقى p-500 دائماً، حتى على خلفية تيل أو أحمر.

✕ محظور 02

لا تُكبّر الرقم ليصبح ظاهراً

الرقم في نظام B وظيفته أن "يكون" لا أن "يُرى". opacity 0.22 هو الحد. أي أثقل يُحوّله من معلومة ناعمة لعنصر يتنافس مع المحتوى.

✕ محظور 03

لا تستخدم IBM Plex للـB-system

نظام B = JetBrains Mono حصراً. IBM Plex للمحتوى. الخلط يُسقط التمييز بين الطبقة المعمارية وطبقة المحتوى — كل القراءة تُتخذ من هذا التمييز.

✕ محظور 04

لا تُحذف الختم من أي مخرج

AZR ◆ ليس خياراً — هو الطبقة الوحيدة التي تُعلن هوية آزر كمنتج للمخرج. مخرج بدون ختم هو مخرج يبدو "مجهول المصدر" مهما كانت جودته.

✕ محظور 05

لا تنقل العين من موضعها

العين تأتي قبل عنوان القسم دائماً — في أعلى يسار منطقة المحتوى. نقلها لأسفل أو للمنتصف يُربك التسلسل القرائي الذي اعتاد عليه المشاهد.

✕ محظور 06

لا تستخدم العين لأكثر من موضع في الشريحة

عينان في شريحة واحدة = شريحة تحتوي قسمين — وهذا يجب أن لا يحدث. كل شريحة = موضوع واحد، عين واحدة. إذا كنت تحتاج قسمين: شريحتان.